<template>
  <el-dialog
    :model-value="props.visible"
    @update:model-value="(value: boolean) => emit('update:visible', value)"
    :title="title"
    width="90%"
    :before-close="handleClose"
    class="enhanced-resume-preview-dialog"
    :fullscreen="isFullscreen"
  >
    <!-- 工具栏 -->
    <div class="preview-toolbar">
      <div class="toolbar-left">
        <el-tag :type="getFileTypeTag(fileType)" size="small">
          {{ getFileTypeLabel(fileType) }}
        </el-tag>
        <span class="file-name">{{ fileName }}</span>
      </div>
      
      <div class="toolbar-center">
        <el-button-group v-if="showPageControls">
          <el-button 
            :disabled="currentPage <= 1" 
            @click="prevPage"
            size="small"
          >
            <el-icon><ArrowLeft /></el-icon>
          </el-button>
          <el-button disabled size="small">
            {{ currentPage }} / {{ totalPages }}
          </el-button>
          <el-button 
            :disabled="currentPage >= totalPages" 
            @click="nextPage"
            size="small"
          >
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </el-button-group>
        
        <el-button-group v-if="showZoomControls">
          <el-button @click="zoomOut" size="small" :disabled="zoomLevel <= 0.5">
            <el-icon><ZoomOut /></el-icon>
          </el-button>
          <el-button disabled size="small" class="zoom-display">
            {{ Math.round(zoomLevel * 100) }}%
          </el-button>
          <el-button @click="zoomIn" size="small" :disabled="zoomLevel >= 3">
            <el-icon><ZoomIn /></el-icon>
          </el-button>
          <el-button @click="resetZoom" size="small">
            <el-icon><Refresh /></el-icon>
          </el-button>
        </el-button-group>
      </div>
      
      <div class="toolbar-right">
        <ThemeToggle />
        <el-button @click="toggleFullscreen" size="small">
          <el-icon><FullScreen /></el-icon>
          {{ isFullscreen ? '退出全屏' : '全屏' }}
        </el-button>
        <el-button type="primary" @click="handleDownload" size="small">
          <el-icon><Download /></el-icon>
          下载
        </el-button>
      </div>
    </div>

    <!-- 预览内容 -->
    <div class="preview-content" v-loading="loading" :loading-text="loadingText">
      <!-- PDF预览 -->
      <div v-if="fileType === 'pdf'" class="pdf-preview">
        <div v-if="!pdfError" class="pdf-container">
          <VueOfficePdf
            :src="authenticatedFileUrl"
            :options="pdfOptions"
            @rendered="onPdfRendered"
            @error="onPdfError"
            style="height: 100%;"
          />
        </div>
        <div v-else class="error-container">
          <el-result
            icon="warning"
            title="PDF预览失败"
            :sub-title="pdfError"
          >
            <template #extra>
              <el-button type="primary" @click="retryLoad">
                <el-icon><Refresh /></el-icon>
                重试
              </el-button>
              <el-button @click="handleDownload">
                <el-icon><Download /></el-icon>
                下载文件
              </el-button>
            </template>
          </el-result>
        </div>
      </div>

      <!-- Word文档预览 -->
      <div v-else-if="isWordFile" class="docx-preview">
        <div v-if="!docxError" class="docx-container">
          <VueOfficeDocx
            :src="authenticatedFileUrl"
            :options="docxOptions"
            @rendered="onDocxRendered"
            @error="onDocxError"
            style="height: 100%;"
          />
        </div>
        <div v-else class="error-container">
          <el-result
            icon="warning"
            title="Word文档预览失败"
            :sub-title="docxError"
          >
            <template #extra>
              <el-button type="primary" @click="retryLoad">
                <el-icon><Refresh /></el-icon>
                重试
              </el-button>
              <el-button @click="handleDownload">
                <el-icon><Download /></el-icon>
                下载文件
              </el-button>
            </template>
          </el-result>
        </div>
      </div>

      <!-- 图片预览 -->
      <div v-else-if="isImageFile" class="image-preview">
        <div class="image-container">
          <img
            :src="effectiveFileUrl"
            alt="简历预览"
            class="preview-image"
            :style="{ transform: `scale(${zoomLevel})` }"
            @load="onImageLoaded"
            @error="onImageError"
          />
        </div>
      </div>

      <!-- 文本文件预览 -->
      <div v-else-if="isTextFile" class="text-preview">
        <div class="text-container">
          <pre class="text-content">{{ textContent }}</pre>
        </div>
      </div>

      <!-- 不支持的文件类型 -->
      <div v-else class="unsupported-preview">
        <el-result
          icon="info"
          title="文件预览"
          :sub-title="`${getFileTypeLabel(fileType)}文件不支持在线预览`"
        >
          <template #extra>
            <el-button type="primary" @click="handleDownload">
              <el-icon><Download /></el-icon>
              下载文件查看
            </el-button>
          </template>
        </el-result>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <div class="footer-info">
          <span class="file-size" v-if="fileSize">文件大小: {{ formatFileSize(fileSize) }}</span>
          <span class="load-time" v-if="loadTime">加载时间: {{ loadTime }}ms</span>
        </div>
        <div class="footer-actions">
          <el-button @click="handleClose">关闭</el-button>
          <el-button type="primary" @click="handleDownload">
            <el-icon><Download /></el-icon>
            下载
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft,
  ArrowRight,
  ZoomIn,
  ZoomOut,
  Download,
  Refresh,
  FullScreen
} from '@element-plus/icons-vue'
import VuePdfEmbed from 'vue-pdf-embed'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import { useUserStore } from '@/stores/user'
import { resumeApi } from '@/api/resume'
import ThemeToggle from './ThemeToggle.vue'

interface Props {
  visible: boolean
  fileUrl?: string
  fileName: string
  title?: string
  resumeId?: number
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'download'): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '简历预览',
  fileUrl: '',
  resumeId: undefined
})

const emit = defineEmits<Emits>()

// 响应式数据
const loading = ref(false)
const loadingText = ref('正在加载...')
const currentPage = ref(1)
const totalPages = ref(1)
const zoomLevel = ref(1)
const isFullscreen = ref(false)
const fileSize = ref(0)
const loadTime = ref(0)
const actualFileUrl = ref('')
const resumeDetail = ref<any>(null)

// PDF相关
const pdfError = ref('')
const pdfOptions = ref({
  scale: 1,
  page: 1
})

// Word文档相关
const docxError = ref('')
const docxOptions = ref({
  debug: false,
  experimental: false,
  className: 'docx-wrapper',
  inWrapper: true,
  ignoreWidth: false,
  ignoreHeight: false,
  ignoreFonts: false,
  breakPages: true,
  ignoreLastRenderedPageBreak: true,
  trimXmlDeclaration: true,
  useBase64URL: false,
  useMathMLPolyfill: false,
  showChanges: false
})

// 文本内容
const textContent = ref('')

// 计算属性

// 获取实际的文件URL
const effectiveFileUrl = computed(() => {
  if (props.fileUrl) {
    return props.fileUrl
  }

  if (props.resumeId && resumeDetail.value) {
    // 根据简历类型返回相应的文件URL
    if (resumeDetail.value.resume_type === 'uploaded' && resumeDetail.value.uploaded_file) {
      return resumeDetail.value.uploaded_file
    } else if (resumeDetail.value.resume_type === 'generated') {
      if (resumeDetail.value.generated_file_url) {
        return resumeDetail.value.generated_file_url
      } else {
        // 使用代理API获取文件
        return `/api/resume-management/resumes/${props.resumeId}/file/`
      }
    }
  }

  return ''
})

const fileType = computed(() => {
  const extension = props.fileName.split('.').pop()?.toLowerCase()
  return extension || ''
})

const isImageFile = computed(() => {
  return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].includes(fileType.value)
})

const isWordFile = computed(() => {
  return ['doc', 'docx'].includes(fileType.value)
})

const isTextFile = computed(() => {
  return ['txt', 'md', 'json', 'xml', 'csv'].includes(fileType.value)
})

const showPageControls = computed(() => {
  return fileType.value === 'pdf' && totalPages.value > 1
})

// 获取带认证的文件URL
const authenticatedFileUrl = computed(() => {
  const userStore = useUserStore()
  const fileUrl = effectiveFileUrl.value

  if (!fileUrl) return ''

  // 如果是API代理URL，在URL中添加token参数
  if (fileUrl.includes('/api/resume-management/resumes/') && fileUrl.includes('/file/')) {
    if (userStore.token) {
      const separator = fileUrl.includes('?') ? '&' : '?'
      return `${fileUrl}${separator}token=${userStore.token}`
    }
  }

  return fileUrl
})

const showZoomControls = computed(() => {
  return ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(fileType.value)
})

// 文件类型标签和标签类型
const getFileTypeTag = (type: string): 'success' | 'warning' | 'danger' | 'info' => {
  const typeMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
    pdf: 'danger',
    doc: 'info',
    docx: 'info',
    jpg: 'success',
    jpeg: 'success',
    png: 'success',
    gif: 'success',
    txt: 'info',
    md: 'info'
  }
  return typeMap[type] || 'info'
}

const getFileTypeLabel = (type: string): string => {
  const labelMap: Record<string, string> = {
    pdf: 'PDF文档',
    doc: 'Word文档',
    docx: 'Word文档',
    jpg: 'JPEG图片',
    jpeg: 'JPEG图片',
    png: 'PNG图片',
    gif: 'GIF图片',
    bmp: 'BMP图片',
    webp: 'WebP图片',
    svg: 'SVG图片',
    txt: '文本文件',
    md: 'Markdown文件',
    json: 'JSON文件',
    xml: 'XML文件',
    csv: 'CSV文件'
  }
  return labelMap[type] || type.toUpperCase() + '文件'
}

// 格式化文件大小
const formatFileSize = (bytes: number): string => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 获取简历文件信息
const fetchResumeFileInfo = async () => {
  if (!props.resumeId) return

  try {
    const response = await resumeApi.getResumeFileInfo(props.resumeId)
    resumeDetail.value = response.data
    actualFileUrl.value = response.data.file_url
  } catch (error) {
    console.error('获取简历文件信息失败:', error)
    ElMessage.error('获取简历文件信息失败')
  }
}

// 监听器
watch(() => props.fileUrl, async (newUrl) => {
  if (newUrl && props.visible) {
    await loadFile()
  }
}, { immediate: true })

watch(() => props.resumeId, async (newResumeId) => {
  if (newResumeId && props.visible) {
    await fetchResumeFileInfo()
    await loadFile()
  }
}, { immediate: true })

watch(() => props.visible, async (newVisible) => {
  if (newVisible) {
    if (props.resumeId && !resumeDetail.value) {
      await fetchResumeFileInfo()
    }
    if (effectiveFileUrl.value) {
      await loadFile()
    }
  } else if (!newVisible) {
    resetPreview()
  }
})

// 加载文件
const loadFile = async () => {
  const fileUrl = effectiveFileUrl.value
  if (!fileUrl) return

  const startTime = Date.now()
  loading.value = true
  resetPreview()

  try {
    if (fileType.value === 'pdf') {
      loadingText.value = '正在加载PDF文档...'
      // Vue-Office PDF组件会自动处理加载
      loading.value = false
    } else if (isWordFile.value) {
      loadingText.value = '正在加载Word文档...'
      // Vue-Office DOCX组件会自动处理加载
      loading.value = false
    } else if (isTextFile.value) {
      loadingText.value = '正在加载文本文件...'
      await loadText()
    } else if (isImageFile.value) {
      loadingText.value = '正在加载图片...'
      // 图片加载由img标签的onload事件处理
      loading.value = false
    } else {
      loading.value = false
    }

    loadTime.value = Date.now() - startTime
  } catch (error) {
    console.error('文件加载失败:', error)
    loading.value = false
    loadTime.value = Date.now() - startTime
  }
}

// 重置预览状态
const resetPreview = () => {
  currentPage.value = 1
  totalPages.value = 1
  zoomLevel.value = 1
  pdfError.value = ''
  docxError.value = ''
  textContent.value = ''
  fileSize.value = 0
  // 重置组件选项
  pdfOptions.value.scale = 1
  pdfOptions.value.page = 1
}

// Vue-Office PDF事件处理
const onPdfRendered = () => {
  loading.value = false
  console.log('PDF渲染完成')
}

const onPdfError = (error: any) => {
  console.error('PDF加载错误:', error)
  pdfError.value = '无法加载PDF文件，请检查网络连接或文件格式'
  loading.value = false
}

// Vue-Office DOCX事件处理
const onDocxRendered = () => {
  loading.value = false
  console.log('DOCX渲染完成')
}

const onDocxError = (error: any) => {
  console.error('DOCX加载错误:', error)
  docxError.value = '无法加载Word文档，请检查网络连接或文件格式'
  loading.value = false
}

// 加载文本文件
const loadText = async () => {
  try {
    const userStore = useUserStore()
    const fileUrl = effectiveFileUrl.value

    if (!fileUrl) {
      throw new Error('文件URL不存在')
    }

    const fetchOptions: RequestInit = {}
    if (fileUrl.includes('/media/') || fileUrl.includes('/api/')) {
      if (userStore.token) {
        fetchOptions.headers = {
          'Authorization': `Bearer ${userStore.token}`
        }
      }
    }

    const response = await fetch(fileUrl, fetchOptions)

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }

    const text = await response.text()
    textContent.value = text
    fileSize.value = new Blob([text]).size
    loading.value = false

  } catch (error) {
    console.error('文本文件加载失败:', error)
    textContent.value = '无法加载文本文件内容'
    loading.value = false
  }
}



// 图片事件处理
const onImageLoaded = () => {
  loading.value = false
}

const onImageError = () => {
  ElMessage.error('图片加载失败')
  loading.value = false
}

// 页面控制
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  }
}

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  }
}

// 缩放控制
const zoomIn = () => {
  if (zoomLevel.value < 3) {
    zoomLevel.value += 0.25
    // 更新PDF选项
    if (fileType.value === 'pdf') {
      pdfOptions.value.scale = zoomLevel.value
    }
  }
}

const zoomOut = () => {
  if (zoomLevel.value > 0.5) {
    zoomLevel.value -= 0.25
    // 更新PDF选项
    if (fileType.value === 'pdf') {
      pdfOptions.value.scale = zoomLevel.value
    }
  }
}

const resetZoom = () => {
  zoomLevel.value = 1
  // 更新PDF选项
  if (fileType.value === 'pdf') {
    pdfOptions.value.scale = 1
  }
}

// 全屏控制
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
}

// 重试加载
const retryLoad = () => {
  loadFile()
}

// 事件处理
const handleClose = () => {
  emit('update:visible', false)
  resetPreview()
  isFullscreen.value = false
}

const handleDownload = () => {
  emit('download')
}
</script>

<style lang="scss" scoped>
.enhanced-resume-preview-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 85vh;
    overflow: hidden;
  }
  
  &:deep(.el-dialog--fullscreen) {
    .el-dialog__body {
      max-height: calc(100vh - 120px);
    }
  }
}

.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-color);
  color: var(--text-color-primary);
  box-shadow: var(--box-shadow-light);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;

  .toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .file-name {
      font-size: 14px;
      font-weight: 500;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text-color-primary);
    }
  }

  .toolbar-center {
    display: flex;
    align-items: center;
    gap: 16px;

    .zoom-display {
      min-width: 60px;
      font-size: 12px;
      color: var(--text-color-secondary);
      font-weight: 500;
    }
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.preview-content {
  height: calc(85vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--bg-color-page);
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.pdf-preview,
.docx-preview,
.image-preview,
.text-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdf-container,
.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 20px;

  .pdf-embed {
    box-shadow: var(--box-shadow);
    border-radius: 12px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-dark);
      border-color: var(--border-color-hover);
    }
  }

  .preview-image {
    max-width: 100%;
    max-height: 100%;
    box-shadow: var(--box-shadow);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    transform-origin: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--box-shadow-dark);
      border-color: var(--border-color-hover);
    }
  }
}

.docx-container {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: var(--bg-color);
  margin: 20px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--box-shadow-dark);
    border-color: var(--border-color-hover);
  }

  :deep(.docx-wrapper) {
    font-family: 'Microsoft YaHei', '微软雅黑', 'PingFang SC', Arial, sans-serif;
    line-height: 1.8;
    color: var(--text-color-primary);
    font-size: 14px;

    p {
      margin: 12px 0;
      color: #000;
    }

    h1, h2, h3, h4, h5, h6 {
      margin: 24px 0 12px 0;
      font-weight: 600;
      color: var(--text-color-primary);
    }

    table {
      border-collapse: collapse;
      width: 100%;
      margin: 20px 0;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--box-shadow-light);
      border: 1px solid var(--border-color);

      td, th {
        border: 1px solid var(--border-color);
        padding: 12px;
        text-align: left;
        color: var(--text-color-primary);
      }

      th {
        background: var(--bg-color-overlay);
        color: var(--text-color-primary);
        font-weight: 600;
      }

      tr:nth-child(even) {
        background-color: #fff;
      }
    }

    ul, ol {
      margin: 12px 0;
      padding-left: 28px;
      color: var(--text-color-primary);
    }

    li {
      margin: 6px 0;
      color: var(--text-color-primary);
    }

    strong, b {
      color: var(--text-color-primary);
      font-weight: 600;
    }

    em, i {
      color: var(--text-color-secondary);
    }
  }
}

.text-container {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: var(--bg-color);
  margin: 20px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--box-shadow-dark);
    border-color: var(--border-color-hover);
  }

  .text-content {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-color-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  // 自定义滚动条
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--bg-color-overlay);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: background-color 0.3s ease;

    &:hover {
      background: var(--border-color-hover);
    }
  }
}

.error-container,
.unsupported-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-color);
  margin: 20px;
  border-radius: 12px;
  box-shadow: var(--box-shadow);
  border: 1px solid var(--border-color);

  :deep(.el-result) {
    .el-result__title {
      color: var(--text-color-primary);
    }

    .el-result__subtitle {
      color: var(--text-color-secondary);
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--bg-color-overlay);
  border-top: 1px solid var(--border-color);
  border-radius: 0 0 12px 12px;

  .footer-info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--text-color-secondary);

    .file-size,
    .load-time {
      padding: 4px 8px;
      background: var(--bg-color);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-color-primary);
      font-weight: 500;
    }
  }

  .footer-actions {
    display: flex;
    gap: 12px;

    .el-button {
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .preview-toolbar {
    flex-direction: column;
    gap: 12px;
    padding: 12px;

    .toolbar-left,
    .toolbar-center,
    .toolbar-right {
      width: 100%;
      justify-content: center;
    }

    .toolbar-left .file-name {
      max-width: none;
      text-align: center;
    }
  }

  .preview-content {
    height: calc(85vh - 180px);
  }

  .pdf-container,
  .docx-container,
  .image-container,
  .text-container {
    padding: 12px;
    margin: 12px;
  }

  .dialog-footer {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .footer-info {
      justify-content: center;
    }

    .footer-actions {
      justify-content: center;
    }
  }
}

// 主题特定优化
.dark {
  .preview-toolbar {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-overlay) 100%);
    border-bottom-color: rgba(var(--color-primary-rgb), 0.2);
  }

  .docx-container,
  .text-container {
    background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-overlay) 100%);
    border-color: rgba(var(--color-primary-rgb), 0.2);
  }

  .pdf-embed,
  .preview-image {
    border-color: rgba(var(--color-primary-rgb), 0.3);

    &:hover {
      border-color: var(--color-primary);
      box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.2);
    }
  }

  .dialog-footer {
    background: linear-gradient(135deg, var(--bg-color-overlay) 0%, rgba(var(--color-primary-rgb), 0.05) 100%);
    border-top-color: rgba(var(--color-primary-rgb), 0.2);

    .file-size,
    .load-time {
      background: linear-gradient(135deg, var(--bg-color) 0%, var(--bg-color-overlay) 100%);
      border-color: rgba(var(--color-primary-rgb), 0.3);
    }
  }
}

// 工具栏按钮样式增强
.preview-toolbar {
  .el-button {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
    }

    &.is-disabled {
      opacity: 0.5;
      transform: none;
      box-shadow: none;
    }
  }

  .el-button-group {
    .el-button {
      &:first-child {
        border-radius: 8px 0 0 8px;
      }

      &:last-child {
        border-radius: 0 8px 8px 0;
      }

      &:only-child {
        border-radius: 8px;
      }
    }
  }
}

// 滚动条全局样式
.pdf-container,
.docx-container,
.image-container,
.text-container {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-track {
    background: var(--bg-color-overlay);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      background: var(--border-color-hover);
    }
  }

  &::-webkit-scrollbar-corner {
    background: var(--bg-color-overlay);
  }
}
</style>
